<script>
import {GetTechStacks} from "../api/setting.js";
export default {
  name: "TechStackEditor",
  props: {
    modelValue: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      stacks: [],
      test: null,
    }
  },
  computed: {
    localValue: {
      set(val) {
        this.updateValue(val)
      },
      get() {return this.modelValue}
    }
  },
  methods: {
    getIcon(id) {
      const idx = this.stacks.findIndex((s) => s.id === id)
      return this.stacks[idx].style
    },
    addTechStack() {
      this.insert({
        level: 1
      })
    },
    async getStacks() {
      const res = await GetTechStacks()
      this.stacks = res.data.data
    },
    updateValue(val) {
      this.$emit('update:modelValue',val)
    },
    insert(val) {
      const nv = this.modelValue
      nv.push(val)
      this.updateValue(nv)
    },
    remove(idx) {
      const nv = this.modelValue
      nv.splice(idx, 1)
      this.updateValue(nv)
    },
    deleteCurrentStack(idx) {
      this.remove(idx)
    }
  },
  mounted() {
    this.getStacks()
  }
}
</script>

<template>
  <div>
    <div class="grid grid-cols-5">
      <div v-for="(tech,idx) in localValue" :key="idx" class="flex p-4 bg-white m-2 rounded-md">
        <div class="flex flex-col justify-center items-center w-full">
          <el-select v-model="tech.stack_id" default-first-option>
            <el-option v-for="(stack, idx) in stacks" :key="idx" :label="stack.name" :value="stack.id">
              <i :class="stack.style"/> {{stack.name}}
            </el-option>
            <template #label="{label,value}">
              <i :class="getIcon(value)"/> {{label}}
            </template>
          </el-select>
          <div class="mt-2 w-full">
            <el-slider showinput :max="10" :min="1" v-model="tech.years"/>
          </div>
          <div class="flex justify-start w-full">
            <el-rate v-model="tech.level" size="large" :max="5" :texts="['入门','初级','中级','熟练', '精通']" show-text/>
          </div>
          <div class="w-full flex justify-center">
            <el-button circle @click="deleteCurrentStack(idx)" class="w-full" icon="Delete" size="small"></el-button>
          </div>
        </div>
      </div>
      <div class="flex justify-center items-center px-4">
        <el-button icon="Plus" @click="addTechStack" circle/>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>